
import $ from "jquery";
 // -1下一页 -2上一页 -3 ...
let DIRECTS     = {
    NONE    : "none",
    LEFT    : "left",
    BOTH    : "both",
    RIGHT   : "right",
}
/**
 * @var target: 容器
 * @var totalData:      0, //数据总条数
 * @var showData:       0, //每页显示的条数
 * @var pageCnt:        10, //总页数,默认为10
 * @var current:        1, //当前第几页
 * @var prevCls:        'prev', //上一页class
 * @var nextCls:        'next', //下一页class,
 * @var eleCls :        'bullet',
 * @var prevContent:    '<', //上一页内容
 * @var nextContent:    '>', //下一页内容
 * @var activeCls:      'active', //当前页选中状态
 * @var callback()：    回调函数
 * @var minIndex        表示中间下标的最小值
 * @var maxIndex        表示中间下标的最大值
 * @var pageData        记录分页item的下标（-1下一页 -2上一页 -3 ...）
 * @var direct          上下页是否有
 * @var width           item 宽度
 */
class Pagination{
    constructor(options){
        this.init.apply(this,arguments);
    }
    init(options){
        this.target = $(options.targetCls);
        this.totalData = options.totalData || 0;
        this.showData  = options.showData || 0;
        this.current   = options.current || 1;
        this.prevCls   = options.prevCls || "prev";
        this.nextCls   = options.nextCls || "next";
        this.prevContent = options.prevContent || "&lt;";
        this.nextContent = options.nextContent || "&gt;";
        this.activeCls = options.activeCls || "active";
        this.eleCls = options.eleCls || "bullet";
        this.callback = options.callback || function () {};
        this.minIndex = 0;
        this.maxIndex = 0;
        this.pageData = [];
        this.width = options.itemWidth || 46;
        this.pageCnt = options.totalData && options.showData ?  Math.ceil(options.totalData / options.showData) : 10;
        this.direct = DIRECTS.NONE;
        this.renderPageItem();
        this.bindEvent();
    }
    // 将分页按顺序排列好，放入pageData数组中
    dealPageData(){
        this.pageData.length = 0;
        if(this.pageCnt <= 10){
            for(let i = 1; i <= this.pageCnt; i++){
                this.pageData.push(i);
            }
        }
        else{
            if(this.current != 1){
                this.pageData.push(-2);
            }
            this.pageData.push(1);
            if(this.current < 5){
                this.minIndex = 2;
                this.maxIndex = 7;
                this.direct = DIRECTS.RIGHT;
            }
            else if(this.current > this.pageCnt -7){
                if(this.current > this.pageCnt - 4){
                    this.minIndex = this.pageCnt -6;
                    this.maxIndex = this.pageCnt -2;
                }
                else{
                    this.minIndex = this.current -3;
                    this.maxIndex = this.pageCnt -2;
                }
                this.direct = DIRECTS.LEFT;
            }
            else{
                this.minIndex = this.current -3;
                this.maxIndex = this.current + 3;
                this.direct = DIRECTS.BOTH;
            }
            if(this.direct == DIRECTS.LEFT || this.direct == DIRECTS.BOTH){
                this.pageData.push(-3);
            }
            for(let i = this.minIndex; i <= this.maxIndex; i++){
                this.pageData.push(i);
            }
            if(this.direct == DIRECTS.RIGHT || this.direct == DIRECTS.BOTH){
                this.pageData.push(-3);
            }
            for(let i = this.pageCnt - 1; i <= this.pageCnt; i++){
                this.pageData.push(i);
            }
            if(this.current != this.pageCnt){
                this.pageData.push(-1);
            }
        }
    }
    // 渲染item
    renderPageItem(){
        this.dealPageData();
        let html = ``;
        this.pageData.forEach((value)=>{
            if(value == -3){
                html += `<span>...</span>`
            }
            else if(value == -1){
                html += `<a href = "javascript:void(0)" class= "${this.nextCls}">${this.nextContent}</a>`;
            }
            else if(value == -2){
                html += `<a href="javascript:void(0)" class="${this.prevCls}">${this.prevContent}</a>`;
            }
            else if(this.current == value){
                html += `<span class="${this.activeCls}">${value}</span>`;
            }
            else{
                html += `<a href="javascript:void(0)" data-page="${value}" class="${this.eleCls}">${value}</a>`;
            }
        });
        this.target.html(html);
        this.target.css({
            width: this.width * this.pageData.length
        })
    }
    // item绑定事件
    bindEvent(){
        let that = this;
        this.target.off().on("click","a",function(){
            if($(this).hasClass(this.nextCls)){
                if(that.current >= that.pageCnt){
                    $(this).addClass("disabled");
                    return false;
                }
                else 
                    that.current++;
            }
            else if($(this).hasClass(this.prevCls)){
                if(that.current <= 1){
                    $(this).addClass("disabled");
                    return false;
                }
                else 
                    that.current++;
            }
            else{
                that.current = parseInt($(this).data('page'));
            }
            that.renderPageItem();
            typeof that.callback === 'function' && that.callback(that);
        });
    }
    // 返回当前页的下标
    getCurrent(){
        return this.current;
    }
}

module.exports = Pagination;